<template>
	<view class="content">
		<view class="form">
			<view class="title">学创签电子合同</view>
			<view style="margin-top: 22rpx;">
				<u-form ref="loginFormRef" :model="loginForm.data" :rules="loginForm.rule" label-width="152rpx">
					<!-- 头像 -->
					<view class="avatarBox">
						<u-form-item label="头像" :border-bottom="true" :required="true" label-width="50">
							<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image class="avatar" :src="avatarUrl"></image>
							</button>
						</u-form-item>
					</view>
					<!-- <u-form-item label="头像" borderBottom customStyle="marginTop:20rpx">
						<view class="avatar"><u-avatar size="50" :src="avatarUrl"></u-avatar>
							<view style="margin-left: 40rpx;" @click="uploadAvatarImage">
								<u--text text="更改头像" type="primary"></u--text>
							</view>
						</view>
					</u-form-item> -->
					<u-form-item label="昵称" prop="nick_name" :required="true" borderBottom
						customStyle="marginTop:20rpx">
						<u-input type="nickname" placeholder="请输入昵称" border="none" @blur="getNickname" />
						<!-- <u-input v-model="loginForm.data.nick_name" customStyle="height:56rpx" border="none" type='text'
							placeholder="输入昵称"></u-input> -->
					</u-form-item>
					<u-form-item label="手机号" prop="cellphone" borderBottom customStyle="marginTop:20rpx"
						:required="true">
						<u-input v-model="loginForm.data.cellphone" customStyle="height:56rpx" border="none"
							maxlength='11' type='number' placeholder="输入手机号"></u-input>
					</u-form-item>
					<u-form-item label="验证码" prop="code" borderBottom customStyle="marginTop:20rpx" :required="true">
						<u-input v-model="loginForm.data.code" border="none" customStyle="height:56rpx" maxlength='6'
							type='number' placeholder="输入验证码"></u-input>
						<template v-slot:right>
							<view @click="sendSms">
								<sms ref="smsC"></sms>
							</view>
						</template>
					</u-form-item>
					<u-form-item label="登录密码" prop="password" borderBottom customStyle="marginTop:20rpx"
						:required="true">
						<u-input v-model="loginForm.data.password" border="none" type="password"
							customStyle="height:56rpx;" placeholder="输入登录密码"></u-input>
					</u-form-item>
					<u-form-item label="确认登录密码" prop="confirm_password" borderBottom labelWidth="212rpx"
						customStyle="marginTop:20rpx" :required="true">
						<u-input v-model="loginForm.data.confirm_password" border="none" type="password"
							customStyle="height:56rpx;" placeholder="确认登录密码"></u-input>
					</u-form-item>
					<u-form-item label="推荐码" prop="promotion_code" borderBottom customStyle="marginTop:20rpx">
						<u-input v-model="loginForm.data.promotion_code" border="none" type="text"
							customStyle="height:56rpx;" placeholder="推荐人推荐码"></u-input>
					</u-form-item>
					<!--					<u-form-item label="签署密码" prop="sign_password" borderBottom customStyle="marginTop:20rpx"-->
					<!--						:required="true">-->
					<!--						<u-input v-model="loginForm.data.sign_password" border="none" type="password"-->
					<!--							customStyle="height:56rpx;" placeholder="输入签署密码"></u-input>-->
					<!--					</u-form-item><u-form-item label="确认签署密码" prop="sign_confirm_password" borderBottom-->
					<!--						labelWidth="212rpx" customStyle="marginTop:20rpx" :required="true">-->
					<!--						<u-input v-model="loginForm.data.sign_confirm_password" border="none" type="password"-->
					<!--							customStyle="height:56rpx;" placeholder="确认签署密码"></u-input>-->
					<!--					</u-form-item>-->
				</u-form>
				<view class="pass-tip">注：密码需字母与数字组合，最少6位</view>
				<view class="bottom-button" style="margin: 60rpx 0 50rpx;">
					<u-button type="primary" text="注册" class="custom-style" @click="loginForm.submit"></u-button>
				</view>
			</view>
		</view>
		<u-toast :type="type" ref="uToast"></u-toast>
		<agreement ref="agreementRef"></agreement>
	</view>
</template>
<script setup>
	import agreement from "@/components/agreement.vue"
	import {
		register
	} from "../../api/module/login.js"
	import {
		reactive,
		ref
	} from 'vue'
	import {
		arrayGet,
		goNav,
		goSwitchTab,
		mobileRegular,
		msg,
		pageUrl,
		upload
	} from "../../utils/common.js"
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from "vuex";
	import {
		sms
	} from '@/components/sms.vue'
	import {
		customStyle,
		customStyle1
	} from "../../utils/style";
	import {
		contractList,
		membercontractList
	} from "../../api/module/contract";
	import {
		uploadImageBase64
	} from "@/api/module/common.js"
	const smsC = ref();
	const show = ref(false);
	const store = useStore();
	const type = ref(1);
	const userType = ref(store.state.userType);
	onLoad(() => {});
	/**
	 * 登录
	 * @type {Ref<UnwrapRef<null>>}
	 */
	const agreementRef = ref()
	const avatarUrl = ref('')
	const loginFormRef = ref(null);
	const imageParams = ref(null);
	const loginForm = reactive({
		data: ref({
			cellphone: '',
			code: '',
			password: '',
			confirm_password: '',
			sign_confirm_password: '',
			image: [119],
			nick_name: '',
			promotion_code: '',
		}),
		formRule: function() {
			return ref({
				cellphone: [{
					required: true,
					message: '请输入手机号',
					trigger: 'blur'
				}, {
					pattern: mobileRegular,
					message: '手机号格式不正确',
					trigger: 'blur'
				}],
				code: [{
					required: true,
					message: '请输入验证码',
					trigger: 'blur'
				}],
				password: [{
					required: true,
					message: '请输入密码',
					trigger: 'blur'
				}],
				confirm_password: [{
					required: true,
					message: '请确认密码',
					trigger: 'blur'
				}]
			})
		},
		rule: {},
		submit: function() {
			setTimeout(() => {
				loginFormRef.value.setRules(loginForm.formRule());
				loginFormRef.value.validate().then(validate => {
					if (validate) {
						if (!agreementRef.value.checkFn()) {
							msg('请同意服务协议和隐私政策');
							return;
						}
						if (!loginForm.data.nick_name) {
							msg('请输入昵称');
							return;
						}
						if (!avatarUrl.value) {
							msg('请上传头像')
							return;
						}
						register(loginForm.data).then(res => {
							uni.setStorageSync("token", res.token)
							uni.setStorageSync("userInfo", res.member)
							uni.showToast({
								title: '注册成功',
								duration: 2000,
								icon: 'success'
							})
							goSwitchTab('/pages/home/index');
							return;
						})
					}
				});
			}, 100)
		}
	})
	const getNickname = (e) => {
		loginForm.data.nick_name = e
	}
	const onChooseAvatar = (e) => {
		avatarUrl.value = e.detail.avatarUrl
		const tempArr = avatarUrl.value.split('.');
		const tempPathArr = avatarUrl.value.split('/');
		const tempExt = tempArr[tempArr.length - 1];
		const tempName = tempPathArr[tempPathArr.length - 1];
		upload({
			tempName: tempName,
			tempPath: avatarUrl.value,
			tempExt: tempExt,
		}, function(response) {
			loginForm.data.image = response.id;
		});
	}
	const sendSms = () => {
		smsC.value.send({
			phone: loginForm.data.cellphone,
			type: "member_register_code",
		})
	}
	onShow(() => {
		loginForm.rule = loginForm.formRule();
		type.value = store.state.userType
	});
	const uploadAvatarImage = () => { //选择图片  转base64
		uni.chooseImage({
			count: 1, //上传图片数量
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
			success: (chooseImageRes) => {
				//tempFilePaths 图片的本地文件路径列表
				const tempFilePaths = chooseImageRes.tempFilePaths[0];
				avatarUrl.value = tempFilePaths;
				console.log(tempFilePaths, 99)
				uni.getFileSystemManager().readFile({
					filePath: tempFilePaths, // 要读取的文件路径
					encoding: 'base64', // 编码格式
					success: function(res) {
						console.log(res)
						uploadAndEditImage(res.data)
					},
					fail(err) {}
				})
			}
		});
	}
	const uploadAndEditImage = (url) => {
		imageParams.value = {
			ext: 'png',
			content: url,
			org_name: new Date().getTime() + '.png'
		}
		console.log(imageParams.value);
		return;
	}
	// 登录
	const clickRegister = () => {
		let images = [];
		uploadImageBase64(imageParams.value).then(res => {
			images.push(res.id);
			loginForm.data.image = images;
			console.log(loginForm.data);
			register(loginForm.data).then(res => {
				uni.setStorageSync("token", res.token)
				uni.setStorageSync("userInfo", res.member)
				uni.showToast({
					title: '注册成功',
					duration: 2000,
					icon: 'success'
				})
				goSwitchTab('/pages/home/index');
				return;
			})
		})
	}
</script>
<style lang="scss" scoped src="/static/css/login.scss"></style>
<style lang="scss" scoped>
	button::after {
		border: none;
	}

	.avatarBox {
		:deep(.u-form-item__body__right__content__slot) {
			flex: 0;
		}
	}

	.avatar-wrapper {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		padding: 0;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			display: block;
		}
	}
</style>